<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" >
        <chart-card :loading="loading" title="视频总数" :total="videoCount.videoTotal? videoCount.videoTotal +'部':'0'" >
          <a-tooltip title="视频总数" slot="action" >
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>

            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">普通视频</span>
              {{videoCount.videoType1?videoCount.videoType1:"0"}} 部
            </trend>
            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">短视频</span>
              {{videoCount.videoType2?videoCount.videoType2:"0"}} 部
            </trend>
          </div>


          <template slot="footer">今日新增<span> {{videoCount.videoToday?videoCount.videoToday:"0"}} 部</span></template>
        </chart-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" v-has="'user:up'">
        <chart-card :loading="loading" title="当前余额" :total="'￥' + balance" >
          <a-tooltip title="当前余额" slot="action" >
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>

            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">今日收入</span>
              {{payCount.today? '￥' + payCount.today : 0}}
            </trend>
          </div>
          <template slot="footer">
            总收入<span style="margin-right: 20px;"> {{ payCount.total? '￥' + payCount.total : 0}}</span>
            已提现<span> {{ '￥' + withdrawal}}</span>
          </template>
        </chart-card>
      </a-col>


      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" >
        <chart-card :loading="loading" title="用户数" :total="userCount.userTotal? userCount.userTotal +'人':'0'">
          <a-tooltip title="新增用户数" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>

            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">已开通VIP</span>
              {{userCount.vipCount?userCount.vipCount:"0"}} 人
            </trend>
            <!--<trend flag="up" style="margin-right: 16px;">
              <span slot="term">UP</span>
              {{userCount.upCount?userCount.upCount:"0"}} 人
            </trend>
            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">代理</span>
              {{userCount.agentCount?userCount.agentCount:"0"}} 人
            </trend>-->
          </div>
          <template slot="footer">今日新增<span> {{userCount.userlToday?userCount.userlToday:"0"}}</span></template>
        </chart-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" >
        <chart-card :loading="loading" title="今日支付笔数" :total="orderCount.today?orderCount.today + '笔':'0笔'">
          <a-tooltip title="今日支付笔数" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend flag="" style="margin-right: 5%;">
              <span slot="term">VIP充值</span>
              {{orderCount.type1?orderCount.type1 + '':'0'}}笔，
            </trend>
            <trend flag="" style="margin-right: 5%;">
              <span slot="term">金币充值</span>
              {{orderCount.type2?orderCount.type2 + '':'0'}}笔
            </trend>

          </div>
          <template slot="footer">
            失败 <span style="margin-right: 20px">{{orderCount.fail?orderCount.fail + '':'0'}} 笔</span>
            成功率 <span >{{orderCount.rate?orderCount.rate + '':'0'}} %</span>
          </template>
        </chart-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" >
        <chart-card :loading="loading" title="充值总收入" :total="orderCount.moneyAll?'￥'+ orderCount.moneyAll :'￥0'">
          <a-tooltip title="充值总收入" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend flag="" style="margin-right: 5%;">
              <span slot="term">今日充值</span>
              ￥{{orderCount.moneyToday?orderCount.moneyToday + '':'0'}}
            </trend>


          </div>
          <template slot="footer">
            本周 <span style="margin-right: 20px">￥{{orderCount.moneyWeek?orderCount.moneyWeek + '':'0'}} </span>
            本月 <span style="margin-right: 20px">￥{{orderCount.moneyMonth?orderCount.moneyMonth + '':'0'}} </span>
          </template>
        </chart-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" >
        <chart-card :loading="loading" title="金币消费" :total="payCount.total? payCount.total +'':'0'" >
          <a-tooltip title="金币消费" slot="action" >
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <template slot="footer">今日消费<span> {{payCount.today?payCount.today +'':'0'}} </span></template>
        </chart-card>
      </a-col>

      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }" >
        <chart-card :loading="loading" title="在线人线" :total="appOnline.total? appOnline.total +'人':'0'" >
          <a-tooltip title="在线人线" slot="action" >
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend flag="" style="margin-right: 5%;">
              <span slot="term">APP:</span>
              {{appOnline.app?appOnline.app + '':'0'}}
            </trend>
            <trend flag="" style="margin-right: 5%;">
              <span slot="term">H5:</span>
              {{appOnline.h5?appOnline.h5 + '':'0'}}
            </trend>
          </div>
          <template slot="footer"> </template>
        </chart-card>
      </a-col>


      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }"  v-for="(item,idx) in online" :key="idx">
        <chart-card :loading="loading" :title="'网关'+(idx + 1)+'连接数'" :total="item.countList && item.countList.length>0?item.countList[item.countList.length - 1].y + '':0 + ''">
          <a-tooltip :title="item.name" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area :dataSource="item.countList" />
          </div>

          <template slot="footer"> {{item.name}}</template>
        </chart-card>
      </a-col>


    </a-row>


    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}" >
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">

          <a-tab-pane loading="true" tab="销售额" key="1">
            <a-row>
              <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                <bar title="本月销售统计" :dataSource="barData" :yaxisText="'销售额'" v-if="showBar"/>
              </a-col>

            </a-row>
          </a-tab-pane>

        </a-tabs>
      </div>
    </a-card>

    <a-row >
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" title="当月访问次数统计" :style="{ marginTop: '24px' }">
          <a-row>
            <a-col :span="6">

            </a-col>

            <a-col :span="6">

            </a-col>

            <a-col :span="6">
              <head-info title="总访问量" :content="total"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="rise" style="font-size: 24px"  />
              </a-spin>
            </a-col>
          </a-row>
          <line-chart-multid :fields="visitFields" :aliases="aliases" :dataSource="visitInfo" v-if="visitInfo.length>0 && this.showVisit"></line-chart-multid>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>


  import ChartCard from '@/components/ChartCard'
  import ACol from "ant-design-vue/es/grid/Col"
  import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
  import MiniArea from '@/components/chart/MiniArea'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniProgress from '@/components/chart/MiniProgress'
  import RankList from '@/components/chart/RankList'
  import Bar from '@/components/chart/Bar'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import HeadInfo from '@/components/tools/HeadInfo.vue'

  import Trend from '@/components/Trend'
  import { getLoginfo,getVisitInfo } from '@/api/api'
  import { getAction,postAction } from '@/api/manage'
  import {  mapGetters } from 'vuex'

  const rankList = []
  for (let i = 0; i < 7; i++) {

  }
  const barData = []

  export default {
    name: "IndexChart",
    components: {
      ATooltip,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      MiniProgress,
      RankList,
      Bar,
      Trend,
      LineChartMultid,

      HeadInfo
    },
    data() {
      return {
        loading: true,
        center: null,
        rankList,
        showBar:false,
        barData,
        timer:"",
        total:'0',
        orderCount:{},
        userCount:{},
        videoCount:{},
        payCount:{},
        rewardCount:{},
        withdrawal:0,
        loginfo:{},
        visitFields:['count'],
        aliases:[{field:'count',alias:'访问量'}],
        visitInfo:[],
        showVisit:false,
        balance:0,
        appOnline:{tota:0,app:0,h5:0},
        online:[],
        indicator: <a-icon type="loading" style="font-size: 24px" spin />
    }
    },
    created() {
      let user = this.userInfo();
      let isAdmin = true;
      if(user && user.userAccount){
        isAdmin = false;
      }
      setTimeout(() => {
        this.loading = !this.loading
      }, 1000)


      this.initLogInfo();
      this.getOrderCount()
      this.getUserCount();
      this.getPayCount()
      this.getVideoCount();


      let t =this;
      this.getOnline()
      if(!this.timer)
        this.timer = setInterval(()=>{
          t.getOnline()
          t.getAppOnline()
        },5000)
    },
    methods: {
      ...mapGetters(["userInfo"]),

      getAppOnline(){
        getAction("/sys/common/appOnline").then((res) => {
          if (res.success) {
            if(res.result){
              this.appOnline = res.result
            }
          }

        })
      },

      getOnline(){
        getAction("/sys/common/online").then((res) => {
          if (res.success) {
            if(res.result){
              let arr =[]

              for(let key in res.result){
                let gate = this.getOnlineCountList(key)
                if(!gate){
                  arr.push({name:key,countList:[{x:this.getTime(),y:res.result[key]}]})
                }else{
                  if(gate.countList.length>=10) {
                    gate.countList.shift()
                  };
                  gate.countList.push({x:this.getTime(),y:res.result[key]})
                  arr.push(gate)
                }

              }
              this.online = arr;

            }
          }

        })
      },

      getTime(){
        let now = new Date();
        return now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
      },

      getOnlineCountList(name){
        for(let i in this.online){
          if(this.online[i].name == name) return this.online[i]
        }
        return  null;
      },

      getOrderCount(){
        postAction("app/appOrder/indexTotal").then(res=>{

          if(res.code == 0 && res.result){
            console.log(res)
            if(res.result.sumByMonth){
              for (let i in  res.result.sumByMonth){
                let days = res.result.sumByMonth[i].days
                this.barData.push({x:days + "日",y:res.result.sumByMonth[i].money})
              }


            }
            this.orderCount = res.result;
            this.showBar = true


          }
        }).catch(res => {
          console.log(res)

        })
      },
      getVideoCount(){

        postAction("app/appVideo/totalByIndex").then(res=>{

          if(res.code == 0 && res.result){
            this.videoCount = res.result;

          }
        })
      },
      getPayCount(){
        postAction("app/appUserPayLog/totalByIndex").then(res=>{

          if(res.code == 0 && res.result){
            this.payCount = res.result;

          }
        })
      },
      getUserCount(){
        postAction("app/appUser/totalByIndex").then(res=>{
          if(res.code == 0 && res.result){

            this.userCount = res.result;
          }
        })
      },
      initLogInfo () {
        getLoginfo(null).then((res)=>{

          if(res.success){
            let temp =[]
            /* Object.keys(res.result).forEach(key=>{
               res.result[key] =res.result[key]+""
             })
             this.loginfo = res.result;*/
            if(res.result && res.result.list){
              let list = res.result.list;
              for(let i in list){
                if(!list[i].createTime) continue;
                let s = list[i].createTime.split("-");

                temp.push({
                  type:s[1] +"-"+s[2],
                  count:list[i].count,

                })

              }
              this.visitInfo = temp;

              this.showVisit = true;


            }


            if(res.result.total) this.total = res.result.total +"";
          }
        })


      },
    }
  }
</script>

<style lang="less" scoped>
  .circle-cust{
    position: relative;
    top: 28px;
    left: -100%;
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }
    p {
      line-height: 42px;
      margin: 0;
      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }
</style>